<template>
    <div class="chat-page">
        <div class="chat-header">
            <img class="arrow" src="../../assets/image/arrow.png" alt="">
            <span class="name">陌生人</span>
            <img class="ear" src="../../assets/image/ear.png" alt="">
            <img class="phone" src="../../assets/image/phone.png" alt="">
            <img class="menu" src="../../assets/image/menu.png" alt="">
        </div>
        <div ref="content" class="chat-content">
            <div class="chat-infomation" :class="{own:chat.id === userId}" v-for="chat of chats">
                <div class="chat-avatar"></div>
                <div class="chat-chatting">
                    <div class="chat-bubble">
                        <span>{{chat.message}}</span>
                    </div>
                </div>
                <van-loading v-show="chat.id === userId && chat.loading === true" type="spinner" color="#919191" class="chat-loading"/>
            </div>
        </div>
        <div class="chat-footer">
            <img class="microphone" src="../../assets/image/microphone.png" alt="">
            <input type="text" v-model="message" @keydown.enter="send">
            <img class="smile" src="../../assets/image/smile.png" alt="">
            <img class="add" src="../../assets/image/add.png" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import { nextTick, ref, reactive } from "vue"
const message = ref('')
const content = ref<HTMLElement>()
let userId = 0
const chats = reactive([
    {
        id:1,
        message:'你好',
        loading:false
    },
    {
        id:0,
        message:'你好',
        loading:false
    },
    {
        id:0,
        message:'一起来聊天吧',
        loading:false
    },
])
const send = ()=>{
    if(message.value.trim() === ''){
        return
    }
    // console.log(content.value?.scrollHeight);
    // console.log(content.value?.clientHeight);
    
    chats.push({
        id:userId,
        message:message.value,
        loading:true
    })
    message.value = ''
    nextTick(()=>{
        content.value?.scrollTo({
            top:content.value?.scrollHeight - content.value?.clientHeight
        })
    })
}
</script>

<style lang="scss" scoped>
.chat-page{
    display: flex;
    flex-direction: column;
    height: 100%;
    .chat-header{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 100px;
        background-color: #fff;
        padding: 0 40px 0 28px;
        font-size: 36px;
        img{
            height: 30px;
        }
        .name{
            margin-left: 40px;
            line-height: 30px;
        }
        .ear{
            margin-left: 20px;
            height: 30px;
        }
        .phone{
            margin-left: auto;
        }
        .menu{
            margin-left: 24px;
        }
    }
    .chat-content{
        overflow: auto;
        flex: 1;
        background-color: #f1f1f1;
        padding: 0 40px 40px;
        .chat-infomation{
            box-sizing: border-box;
            display: flex;
            margin-top: 40px;
            .chat-avatar{
                flex-shrink: 0;
                width: 96px;
                height: 96px;
                background-color: #89c997;
                border-radius: 50px;
            }
            .chat-chatting{
                .chat-bubble{
                    padding: 16px 22px;
                    border-radius: 12px;
                    font-size: 30px;
                    line-height: 1.5;
                    background-color: #fff;
                    color: #333;
                    margin-top: 10px;
                    margin-left: 20px;
                }
            }
            .chat-loading{
                flex-shrink: 0;
                margin-top: 32px;
                margin-right: 20px;
            }
            &.own{
                flex-direction: row-reverse;
                .chat-chatting{
                    .chat-bubble{
                        background-color: #1993fa;
                        color: #fff;
                        margin-left: 0;
                        margin-right: 20px;
                    }
                }
            }
        }
    }
    .chat-footer{
        flex-shrink: 0;
        height: 100px;
        background-color: #e5e5e5;
        display: flex;
        align-items: center;
        padding: 0 30px 0 28px;
        box-sizing: border-box;
        input{
            margin-left: 20px;
            flex: 1;
            width: 20px;
            border: 0;
            border-radius: 8px;
            padding: 4px 20px;
            font-size: 28px;
            line-height:56px;
        }
        img{
            height: 40px;
        }
        .smile{
            margin-left: 20px;
        }
        .add{
            flex-shrink: 0;
            margin-left: 20px;
        }
    }
}
</style>
